<template>
	<view class="content">
		<view class="nav">
			<u-tabs :list="orderlsit" @change="click" lineWidth="30" lineHeight="7" lineColor="#f55c21" :activeStyle="{
			color: '#f55c21', fontSize: '32rpx'}" :inactiveStyle="{fontSize: '30rpx',padding:'10rpx'}"
				itemStyle="background-color: #fff;height: 50px;font-size:35rpx;" :current="current">
			</u-tabs>
		</view>
		<u-empty v-if="order.length <= 0" mode="order" width="50%" textSize="30"
			icon="http://cdn.uviewui.com/uview/empty/order.png">
		</u-empty>
		<view class="box" v-else>
			<view class="content-list" v-for="(item,index) in order" :key="index">
				<view class="top" @click="getDetail(item.id)">
					<text class="pathTitle">
						<!-- {{item.orderTitle}} -->
						订单
					</text>
					<text
						:class="['status', getStatusClass(item.orderStatus)]">{{ getStatusText(item.orderStatus) }}</text>
				</view>
				<view class="center" @click="getDetail(item.id)">
					<view v-if="item.needCameraman == 0">
						{{item.cameramanSex =='male_photography' ? '男' : '女' }}{{item.cameramanType =="senior_photographer" ? '高级' :'普通' }}摄影师
						<view class="truingNumber">
							{{item.truingNumber}}张精修{{item.simpleModifyNumber}}张简修
						</view>
					</view>

					<view v-if="item.needCameraman == 1">
						不包含摄影师
					</view>
					<text>订单金额:{{item.amount}}元</text>
				</view>
				<view class="bottom" @click="getDetail(item.id)">
					<text>{{item.startDate}}--{{item.endDate}}</text>
				</view>
				<view>
					<view class="operate" v-if="item.orderStatus != 5  ">
						<view class="cancel-btn" v-if="item.orderStatus == 1 || item.orderStatus == 0"
							@click="getorderCancel(item)">
							取消订单
						</view>
						<view class="other-btn" v-if="item.orderStatus != 6" @click="handleButtonClick(item)">
							{{ getButtonText(item.orderStatus) }}
						</view>

					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" :showCancelButton="true"
			:showConfirmButton="true" :asyncClose="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showIndex: 0,
				orderlsit: [],
				order: [],
				page: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				current: 0,
				type: 1
			};
		},
		methods: {
			click(item) {
				this.getorderlist(item.dictValue)
				this.current = item.index
			},
			async getdictdatatype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: "order_status"
				})
				if (res.code == 200) {
					const list = [{
						dictLabel: '全部'
					}, ...res.data]
					this.orderlsit = list.map(item => ({
						name: item.dictLabel,
						...item
					}))
				}
			},
			// 订单列表
			async getorderlist(value) {
				let res = await this.$u.api.getorderlist({
					orderStatus: value,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				})
				if (res.code == 200) {
					// 如果是第一页，直接替换数据
					if (this.page.pageNum == 1) {
						this.order = res.rows;
					} else {
						// 如果不是第一页，追加数据
						this.order = [...this.order, ...res.rows];
					}
					this.total = res.total;
				}
			},
			getStatusText(status) {
				const statusMap = {
					0: '未支付',
					1: '未开始',
					2: '进行中',
					3: '待确认',
					4: '已完成',
					5: '已取消',
					6: '已退款'
				}
				return statusMap[status] || '未知状态'
			},
			getStatusClass(status) {
				if (this.type == 1) {
					const classMap = {
						0: 'status-red',
						1: 'status-orange',
						2: 'status-blue',
						3: 'status-green',
						4: 'status-purple',
						5: 'status-gray',
						// 6: 'status-gray'
					}
					return classMap[status] || ''
				} else {
					const classMap = {
						0: 'status-red',
						1: 'status-orange',
						2: 'status-blue',
						3: 'status-green',
						4: 'status-purple',
						5: 'status-gray',
						// 6: 'status-gray'
					}
					return classMap[status] || ''
				}

			},
			getButtonText(status) {
				if (this.type == 1) {
					const buttonTextMap = {
						0: '去支付',
						1: '开始',
						2: '去沟通',
						3: '确认',
						4: '返回首页',
					}
					return buttonTextMap[status] || ''
				} else {
					const buttonTextMap = {
						0: '去支付',
						1: '开始',
						2: '去沟通',
						3: '确认',
						4: '发布动态',
					}
					return buttonTextMap[status] || ''
				}
			},
			handleButtonClick(item) {
				switch (item.orderStatus) {
					case '0':
						this.goToPay(item);
						break;
					case '1':
						this.startOrder(item);
						break;
					case '2':
						this.communicateOrder(item);
						break;
					case '3':
						this.completeOrder(item);
						break;
					case '4':
						this.evaluateOrder(item);
						break;
						// case '5':
						// 	this.deleteOrder(item);
						// 	break;
						// case '6':
						// 	this.deleteOrder(item);
						// 	break;
				}
			},
			// 是否在审核
			async getconfigKey() {
				let res = await this.$u.api.getconfigKey({
					configKey: 'is_audit'
				})
				if (res.code == 200) {
					this.type = res.msg
				}
			},
			async goToPay(item) {
				// 实现去支付逻辑
				let that = this
				uni.showModal({
					title: '确认支付订单？',
					async success(res) {
						if (res.confirm) {
							let res1 = await that.$u.api.getwxpay({
								orderNumber: item.orderNumber
							})
							if (res1.code == 200)
								wx.requestPayment({
									timeStamp: res1.data.timeStamp,
									nonceStr: res1.data.nonceStr,
									package: res1.data.packageVal,
									signType: res1.data.signType,
									paySign: res1.data.paySign,
									success(res2) {
										that.$u.toast('支付成功')
										that.getorderlist(1)
										that.current = 2
									},
									fail(res2) {
										that.$u.toast('支付失败')
										uni.reLaunch({
											url: '/packagesMe/me/myOrder'
										})
									}
								})
						} else if (res.cancel) {
							that.$u.toast('取消支付')
						}
					}
				})
			},
			async startOrder(item) {
				// 实现去开始逻辑
				console.log('开始订单', item);
				let that = this
				uni.showModal({
					title: '确认开始订单？',
					async success(res) {
						if (res.confirm) {
							let res1 = await that.$u.api.getstartOrder({
								orderNumber: item.orderNumber
							})
							if (res1.code == 200) {
								that.$u.toast('开始订单')
								that.getorderlist(2)
								that.current = 3
							}
						} else if (res.cancel) {
							that.$u.toast('取消开始')
						}
					}
				})

			},
			async getorderCancel(item) {
				// 实现取消订单逻辑
				console.log('取消订单', item);
				let that = this
				uni.showModal({
					title: '确认取消订单？',
					async success(res) {
						if (res.confirm) {
							let res1 = await that.$u.api.getorderCancel({
								id: item.id
							})
							if (res1.code == 200) {
								that.$u.toast('取消订单成功')
								that.getorderlist(5)
								that.current = 6
							}
						} else if (res.cancel) {
							that.$u.toast('取消订单失败')
						}
					}
				})
			},
			async communicateOrder(item) {
				// 实现去沟通逻辑
				uni.switchTab({
					url: '/pages/message/message'
				})
			},
			evaluateOrder(item) {
				// 实现去评价逻辑
				if (this.type == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateTo({
						url: `/packagesMe/me/trends?id=${item.id}`
					})
				}
			},
			async completeOrder(item) {
				// 实现完成订单逻辑
				console.log('确认订单', item);
				let that = this
				uni.showModal({
					title: '确认订单已完成？',
					async success(res) {
						if (res.confirm) {
							let res1 = await that.$u.api.getconfirmOrder({
								orderNumber: item.orderNumber
							})
							if (res1.code == 200) {
								that.$u.toast('确认成功')
								that.getorderlist(4)
								that.current = 5
							}
						} else if (res.cancel) {
							that.$u.toast('取消确认')
						}
					}
				})

			},
			async deleteOrder(item) {
				let that = this
				uni.showModal({
					title: '确认删除？',
					async success(res) {
						if (res.confirm) {
							let res1 = await that.$u.api.getorder({
								id: item.id
							})
							if (res1.code == 200) {
								that.$u.toast('删除成功')
								that.getorderlist(4)
								that.current = 5
							}
						} else if (res.cancel) {
							that.$u.toast('取消删除')
						}
					}
				})
			},
			// 订单详情
			getDetail(id) {
				uni.navigateTo({
					url: `/packagesMe/me/orderDetail?id=${id}`
				})
			},
			// 上拉加载
			loadMore() {
				if (this.order.length >= this.total) {
					uni.showToast({
						title: '没有更多订单了',
						icon: "none"
					});
					return;
				}

				this.page.pageNum += 1;
				uni.showLoading({
					title: '加载中...'
				});

				this.getorderlist().then(() => {
					uni.hideLoading();
				}).catch(error => {
					console.error('加载更多数据时出错:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			})
			this.getdictdatatype()
			this.getorderlist()
			this.getconfigKey()
			setTimeout(() => {
				uni.hideLoading()
			}, 100)
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 刷新数据的逻辑
			this.page.pageNum = 1
			this.page.pageSize = 10
			this.getorderlist()
			// 模拟异步操作
			setTimeout(() => {
				// 刷新完成后，结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
			this.current = 0
		},
		// 上拉加载
		onReachBottom() {
			this.loadMore();
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 99vh;
		background-color: #f6f6f6;
		padding: 20rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;

		.nav {
			position: fixed;
			top: 0;
			z-index: 999;
			padding: 0;
			background-color: #fff;
		}

		.box {
			padding-top: 80rpx;
			box-sizing: border-box;

			.content-list {
				margin: 20rpx 20rpx 0 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 15rpx 0;

					.pathTitle {
						width: 65%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					text {
						font-size: 30rpx;
						color: #333;

						&.status {
							font-weight: 400;
							font-size: 30rpx;
						}
					}
				}

				.center {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 15rpx 0;

					.truingNumber {
						margin-top: 15rpx;
					}
				}

				.bottom {
					font-size: 24rpx;
					color: #ddd;
					padding: 0 0 15rpx 0;
					box-sizing: border-box;
				}

				.operate {
					padding: 15rpx 0;
					display: flex;
					justify-content: flex-end;
					gap: 20rpx;

					.cancel-btn,.other-btn{
						width:140rpx;
						height:50rpx;
						border-radius: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size:22rpx;
						border:1rpx solid #ec6531;
					}
					
					.cancel-btn{
						color:$overall-color;
					}
					
					.other-btn{
						background-color: $overall-color;
						color:white;
					}
				}

				.btn {
					margin-right: 10rpx;
				}

				.status.status-red {
					color: #ff0000;
				}

				.btn.status-red {
					color: #096EF4;
					border-color: #096EF4;
				}

				.status.status-orange {
					color: #ffa500;
				}

				.btn.status-orange {
					color: #ff0000;
					border-color: #ff0000;
				}

				.status.status-blue {
					color: #096EF4;
				}

				.btn.status-blue {
					color: #ffa500;
					border-color: #ffa500;
				}

				.status.status-green {
					color: #11BE60;
				}

				.btn.status-green {
					color: #11BE60;
					border-color: #11BE60;
				}

				.status.status-gray {
					color: #ddd;
				}

				.btn.status-gray {
					color: #666666;
					border-color: #666666;
				}

				.btn.status-purple {
					color: #ae81ff;
					border-color: #ae81ff;
				}
			}
		}


	}
</style>